<template>
	<view class="warp" :style="[{ paddingTop: StatusBar + 'px' }]">
		<!-- background pic start -->
		<view class="bg">
			<view class="logo-contnt">
				<view class="logo">
					<image src="../../../static/logo.png" mode="aspectFit" class="image"></image>
				</view>
			</view>
		</view>
		<!-- background pic end -->

		<view class="form-wapper">
			<view class="block-box solid-bottom">
				<view class="title">
					<image class="image" :src="image1" mode="aspectFit"></image>
				</view>
				<input focus type="number" maxlength="11" v-model="info.username" placeholder-class="placeholderClass"
					placeholder="请输入手机号" name="input" />
			</view>
			<view class="block-box solid-bottom">
				<view class="title">
					<image class="image" :src="image2" mode="widthFix"></image>
				</view>
				<input type="number" v-model="info.vercode" placeholder-class="placeholderClass" placeholder="请输入短信验证码"
					name="input" />
				<text class="code" @click="handleSendVerCode">
					{{ beginning ? time + "s后重新获取" : "获取验证码" }}
				</text>
			</view>
			<view class="block-box solid-bottom">
				<view class="title">
					<image class="image" :src="image2" mode="widthFix"></image>
				</view>
				<view class="pwd">
					<input placeholder-class="placeholderClass" v-if="type == 'password'" type="password"
						v-model="info.password" placeholder='请设置6-20位登录密码' minlength="6" maxlength="12" />
					<input placeholder-class="placeholderClass" v-if="type == 'text'" type="text"
						v-model="info.password" placeholder='请设置6-20位登录密码' minlength="6" maxlength="12" />
					<view class="pwd-right">
						<image :src="image3" :data-type="type" @click.stop="is_kejian"
							v-if="type == 'text'" mode="widthFix" data-pt='type'></image>
						<image :src="image4" class="close" :data-type="type"
							@click.stop="is_kejian" v-if="type == 'password'" mode="widthFix" data-pt='type'></image>
					</view>
				</view>
			</view>
			<view class="block-box solid-bottom">
				<view class="title">
					<image class="image" :src="image2" mode="widthFix"></image>
				</view>
				<view class="pwd">
					<input placeholder-class="placeholderClass" v-if="sureType == 'password'" type="password"
						v-model="info.sure_password" placeholder='请再次输入新的登录密码' minlength="6" maxlength="12" />
					<input placeholder-class="placeholderClass" v-if="sureType == 'text'" type="text"
						v-model="info.sure_password" placeholder='请再次输入新的登录密码' minlength="6" maxlength="12" />
					<view class="pwd-right">
						<image :src="image3" :data-type="sureType" @click.stop="is_kejian"
							v-if="sureType == 'text'" mode="widthFix" data-pt='sureType'></image>
						<image :src="image4" class="close" :data-type="sureType"
							data-pt='sureType' @click.stop="is_kejian" v-if="sureType == 'password'" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 立即登录按钮 start -->
		<view class="login-btn" @click="handleApply">立即注册</view>
		<!-- 立即登录按钮 end -->

		<view class="reg-paw flex justify-center" @tap="backLogin">
			<text class="text-999">已有账号？</text>
			<text class="text-right" style="color: #FC6296;">立即登录</text>
		</view>

		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
	// 引入规则校验文件
	import {
		validate
	} from '@/common/utils/index';
	// import { UploadImg } from '@/common/utils/upload-image.js'
	// 引入上传图片公共方法
	import {
		UploadImage
	} from '@/common/utils/index';
	// 引入上传公共url
	import {
		UPLOAD_IMAGE_URL
	} from '@/common/config.js';
	import wPicker from '../../components/w-picker/w-picker.vue';
	
	export default {
		data() {
			return {
				info: {
					username: '',
					password: '',
					sure_password: '',
					vercode:""
				},
				type: 'password', //密码类型
				sureType: 'password',
				is_click: false,
				// vercode: "", // 验证码,@String
				verCodeBtnLoading: false, // 是否显示加载图标,@Boolean
				time: 60, // 倒计时60S,@Number
				beginning: false, // 显示倒计时,@Boolean
				PAGE_BASE_URL: "/pages/user/login/", // 页面基础路径,@String
				image1:require('../../../pages/user/static/phone.png'),
				image2:require('../../../pages/user/static/pwd.png'),
				image3:require('../../../pages/user/static/open.png'),
				image4:require('../../../pages/user/static/close.png'),
				image5:require('../../../pages/user/static/checked.png'),
			};
		},
		components: {
			wPicker
		},
		mounted() {},
		onLoad(option) {},
		methods: {
			/**
			 * @event 发送验证码
			 */
			handleSendVerCode() {
				// 保存this
				let _this = this;
				// 从this里结构出来phone
				
				let phone = _this.info.username
				// 验证手机号strat
				if (!phone) {
					this.$message.info("请输入手机号");
					return false;
				}
				if (!validate(phone, "phone")) {
					this.$message.info("请正确输入手机号");
					return false;
				}
				// 验证手机号 end

				// 如果有倒计时，return false
				if (this.beginning) return false;

				this.verCodeBtnLoading = true; // 显示加载状态


				/**
				 * @desc 请求验证码接口
				 * @param {Object} {} - 参数
				 * @param {Boolean} {}.is_test - 是否是测试环境
				 * @param {String} {}.mobile - 手机号
				 * @param {String} {}.type - 类型
				 */
				this.$api
					.post(global.apiUrls.GetVerifyCode, {
						is_test: global.IS_DEV,
						mobile: phone,
						type: "1",
					})
					.then((res) => {

						// 改加载状态为false
						_this.verCodeBtnLoading = false;

						// 如果后台返回的code码为1
						if (res.data.code == 1) {
							_this.beginning = true; // 显示倒计时
							// 清除倒计时,防抖作用
							clearInterval(_this.timer);
							_this.timer = setInterval(() => {
								if (_this.time == 1) {
									//倒计时结束就清楚这个倒计时
									clearInterval(_this.timer);
									_this.time = 60; // 倒计时60s
									_this.beginning = false; // 是否显示倒计时改为false
									return;
								}
								_this.time--;
							}, 1000);
							// 向用户发送提示
							if (global.IS_DEV) {
								_this.$message.info("验证码为" + res.data.data.code + "请注意查收");
							} else {
								_this.$message.info(res.data.msg)
							}
						} else {
							// 如果报错，向用户提示
							_this.$message.info(res.data.msg);
						}
					})
					.catch(function(err) {
						// 改加载状态为false
						_this.verCodeBtnLoading = false;

						// 接口错误打印错误
						console.log(err);
					});
			},
			is_kejian(e) {
				console.log(e);
				let type = e.currentTarget.dataset.type;
				let pt = e.currentTarget.dataset.pt;
				if (type == 'password') {
					this[pt] = 'text';
				} else {
					this[pt] = 'password';
				}
			},
			// 登录
			backLogin() {
				uni.navigateTo({
					url: '/pages/user/login/login-password/index'
				})
			},
			// 申请
			handleApply() {
				if (this.is_click) return;
				let {
					username,
					password,
					vercode,
					sure_password
				} = this.info;
				if (!username.trim()) {
					this.$message.info('请输入商家账号');
					return;
				}
				if (!validate(username, 'phone')) return this.$message.info('手机号不正确');
				if (!password.trim()) {
					this.$message.info('请输入密码');
					return;
				}
				if (!sure_password.trim()) {
					this.$message.info('请输入确认密码');
					return;
				}
				if (password !== sure_password) {
					this.$message.info('两次输入密码不一致');
					return;
				}
				
				// 数字字母组合正则
				var reg = /^[^\d]*$|^[^a-zA-Z]*$|[^\da-zA-Z]/;

				if (reg.test(password)) {
					this.$message.info('请输入字母加数字的组合密码');
					return;
				}

				uni.showLoading({
					title: '加载中',
					mask: true,
				});

				this.$util.debounce(
					() => {
						this.$api.post(global.apiUrls.register, {
								username: username,
								password: password,
								code:vercode
							})
							.then(res => {
								console.log(res);
								if (res.data.code == 1) {
									let status = res.data.data.status;
									if (res.data.data.store_joinin_id) uni.setStorageSync('store_joinin_id', res
										.data.data.store_joinin_id);
									if (res.data.data.store_user_id) uni.setStorageSync('store_user_id', res.data
										.data.store_user_id);
									
									
									switch (status) {
										case 1:
											// this.$message.info('您的店铺正在审核中，请耐心等待...');
											uni.showLoading({
												title: '加载中'
											});
											setTimeout(() => {
												uni.navigateTo({
													url: '/shop/shop/shop-success/index'
												});
												uni.hideLoading();
											}, 800);
											break;
										case 2:
											this.$message.info('您已开通店铺，请登录');
											setTimeout(() => {
												uni.navigateBack({
													delta: 1
												});
											}, 800);
											uni.hideLoading();
											break;
										case 3:
											uni.navigateTo({
												url: '/shop/shop/shop-package/index'
											});
											uni.hideLoading();
											break;
									}
								} else {
									this.$message.info(res.data.msg);
									uni.hideLoading();
								}
							})
							.catch(err => {
								console.log(err);
								uni.hideLoading();
							});
					},
					500,
					true
				);
			}
		}
	};
</script>

<style scoped lang="scss">
	// 头部返回键 start
	.cu-bar .action {
		position: relative;
		z-index: 5;
	}

	// 头部返回键 end
	// 主体 start
	.warp {
		width: 100%;
		background: url('https://localelife.chunchuangkeji.cn/static/home_bg.jpg') no-repeat;
		background-size:100% 100%;
		min-height: 100vh;
		overflow: hidden;

		// background pic start
		.bg {
			height: 480rpx;
			width: 100%;

			.bg_img {
				height: 480rpx;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
		}

		.logo-contnt {
			width: 100%;
			height: 480rpx;
			overflow: hidden;

			.logo {
				margin-top: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					width: 180rpx;
					height: 180rpx;
				}
			}

			.desc {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				margin-top: 32rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				color: #333333;
			}
		}

		// background pic end

		// 验证码login start
		.margin_top_56 {
			margin-top: 56rpx;
		}

		.form-wapper {
			position: relative;
			// top: -12rpx;
			z-index: 99;

			.block-box {
				margin: 0 60rpx;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				align-items: center;
				position: relative;
				background-color: #fff;
				border-radius: 14rpx;
				border: 1rpx solid #DBDBDB;
				margin-bottom: 40rpx;

				.title {
					margin: 0 28rpx 0 28rpx;
					width: 34rpx;
					height: 100%;
					position: relative;
					flex-shrink: 0;

					.image {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.pwd {
					margin: 0 28rpx 0 0rpx;
					display: flex;
					justify-content: space-between;
					width: 100%;
					align-items: center;

					input {
						flex: 1;
					}

					.pwd-right {
						position: relative;
						right: 0rpx;
						width: 34rpx;
						height: 100%;

						.close {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			// 发送验证码 start
			.code {
				min-width: 250rpx;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FC6296;
				padding-right: 32rpx;
				background: none;

				&:after {
					border: none;
				}
			}

			// 发送验证码 end
			.paw {
				width: 140px;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 200;
				line-height: 34rpx;
				color: #333333;
				width: 100%;
				text-align: right;
				padding-right: 64rpx;
				margin: 24rpx 64rpx 24rpx 0;
			}
		}

		// 验证码login end

		// 立即登录按钮 start
		.login-btn {
			position: relative;
			// top: -14rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FC6296;
			opacity: 1;
			// border-radius: 44rpx;
			border-radius: 14rpx;
			margin: 0 56rpx;
			font-size: 32rpx;
			color: #ffffff;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			margin-top: 104rpx;
		}

		// 立即登录end

		.reg-paw {
			margin: 32rpx 56rpx;
			// text-align: center;

			text {
				font-family: PingFangSC-Regular;
				font-weight: Regular;
				font-size: 28rpx;
				display: inline-block;
				// min-width: 25%;
				position: relative;

				&:last-child {
					color: #FC6296;
				}
			}

			// .wj_mh:before {
			//   position: absolute;
			//   height: 26rpx;
			//   width: 1px;
			//   background: #999;
			//   content: '';
			//   left: 0rpx;
			//   top: 8rpx;
			// }
		}

		// 快捷登录 start
		.quick {
			text-align: center;
			position: absolute;
			width: 100%;
			bottom: 39rpx;

			.quick-title {
				margin: 100rpx 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.txt {
					padding: 0 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC-Regular;
					color: #999999;
				}

				.line {
					display: block;
					width: 160rpx;
					position: relative;

					&:after {
						content: '';
						position: absolute;
						z-index: 0;
						bottom: 0;
						left: 0;
						width: 100%;
						border-bottom: 1px solid #eeeeee;
						transform: scaleY(0.5);
						transform-origin: 0 0;
					}
				}
			}

			image {
				width: 81rpx;
				height: 81rpx;
				margin: 0 35rpx;
			}
		}

		// 快捷登录 end
	}

	.box-bottom {
		position: absolute;
		bottom: 60rpx;
		width: 100%;

		.agreement {
			display: flex;
			width: 100%;
			font-family: PingFangSC-Regular;
			font-size: 22rpx;
			color: #666666;
			align-items: center;
			justify-content: center;

			.image {
				height: 24rpx;
				width: 24rpx;
				margin-right: 12rpx;
			}

			text {
				color: #FC6296;
			}
		}
	}

	.placeholderClass {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	// 主体 end
</style>